<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				<el-button type="primary" @click="add">新增</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="关键词">
							<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop :ref="setRefs('table')" tableName="goodsTable" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter
						   :params="tableParams" :column="tableColumn">

				<el-table-column type="selection" width="40" align="center" fixed></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="160">
					<template #default="scope">
						<el-button type="text" size="mini" @click="toShowRule(scope.row)">规则</el-button>
						<el-button type="text" size="small" @click="editRow(scope.row.id)">编辑</el-button>
						<el-button type="text" size="small" @click="delRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</scTableGdshop>
		</el-main>
		<editDialog :ref="setRefs('editDialog')" @success="tableRefresh"></editDialog>
		<rulesDialog :ref="setRefs('rulesDialog')" @success="tableRefresh"></rulesDialog>
	</el-container>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRefs } from '@/utils/useRefs'
import api from '@/api'
import tool from '@/utils/tool'

import editDialog from './edit'
import rulesDialog from './rulesDialog'
import to from "await-to-js";
import {ElMessage, ElMessageBox} from "element-plus";

const apiObj = api.shop.goodsLimit

const search = reactive({
	keyWord: ''
})

const { refs, setRefs } = useRefs();

const tableParams = ref({})

const tableColumn = reactive([
	{
		prop: 'name',
		label: '限购名称',
	},
	{
		prop: 'limit_type',
		label: '限购类型',
		dict: [
			{
				label: "地址限购",
				value: 1
			}
		]
	},
	{
		prop: 'start_time',
		label: '开始时间',
		formatter: function (row, column, cellValue) {
			return cellValue ? tool.dateFormat(cellValue * 1000) : '-'
		}
	},
	{
		prop: 'end_time',
		label: '结束时间',
		formatter: function (row, column, cellValue) {
			return cellValue ? tool.dateFormat(cellValue * 1000) : '-'
		}
	},
	{
		prop: 'status',
		label: '状态',
		dict: [
			{
				label: "启用",
				value: 1
			},
			{
				label: "禁用",
				value: 0
			}
		]
	},
])

const selectionChange = (val) => {
	console.log(val)
}
const tableRefresh = (isClaer) => {
	if (isClaer === true) {
		search.keyWord = '';
		refs.value.table.refresh();
	}
	else {
		refs.value.table.refresh();
	}
}

const add = () => {
	refs.value.editDialog.open();
}

const editRow = (id) => {
	refs.value.editDialog.edit(id);
}

const delRow = async (row) => {
	let [err, res] = await to(ElMessageBox.confirm('此操作将永久删除该限购规则, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}));
	if (err) {
		return;
	}
	[err, res] = await to(api.shop.goodsLimit.delete({ids:[row.id]}).then(res => res));
	console.log(err, res)
	if (err) {
		ElMessage.error(err.message)
		return
	}
	if (res.code !== 0) {
		ElMessage.error(res.message)
		return
	}
	tableRefresh();
	ElMessage.success('删除成功')
}

const toShowRule = (_row) => {
	refs.value.rulesDialog.open(_row['id']);
};

</script>

<style scoped>

</style>
